<template>
  <div class="sign-container">
    <div class="form-wrap">
      <div class="form-title">用户注册</div>
      <div class="form-item-input">
        <input type="text" v-model="ruleForm.name" placeholder="请输入姓名">
      </div>
      <div class="form-item-input">
        <input type="text" v-model="ruleForm.phone" placeholder="请输入手机号">
      </div>
      <div class="form-item-input">
        <input type="text" v-model="ruleForm.username" placeholder="请输入用户名">
      </div>
      <div class="form-item-input">
        <input type="password" v-model="ruleForm.password" placeholder="请输入密码">
      </div>
      <div class="form-item-input">
        <input type="password" v-model="ruleForm.confirmPassword" placeholder="请再次输入密码">
      </div>

      <div class="submit-btn" @click="onClickSign">
        注册
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive} from "vue";
import {ElMessage, ElNotification} from 'element-plus'
import $api from '@/api'
import {useRouter} from "vue-router";

const router = useRouter()
const ruleForm = reactive({
  name: '',
  phone: '',
  username: '',
  password: '',
  confirmPassword: ''
})
/**
 * 点击注册
 */
var loading = false
const onClickSign = () => {
  if (ruleForm.name.length === 0) {
    ElMessage({
      message: '请输入姓名',
      type: 'warning',
    })
  } else if (ruleForm.phone.length === 0) {
    ElMessage({
      message: '请输入手机号',
      type: 'warning',
    })
  } else if (ruleForm.username.length === 0) {
    ElMessage({
      message: '请输入用户名',
      type: 'warning',
    })
  } else if (ruleForm.password.length === 0) {
    ElMessage({
      message: '请输入密码',
      type: 'warning',
    })
  } else if (ruleForm.password !== ruleForm.confirmPassword) {
    ElMessage({
      message: '两次密码不一致',
      type: 'warning',
    })
  } else {
    if (loading) {
      return
    }
    loading = true
    $api.userApi.sign(ruleForm).then(res => {
      ElNotification({
        title: '成功',
        message: '注册成功！',
        type: 'success',
      })
      router.push('/login')
      loading = false
    }).catch(() => {
      loading = false
    })
  }
}
</script>

<style scoped lang="scss">
.sign-container {
  width: 100%;
  background-color: #e6ebef;
  padding-top: 60px;
  padding-bottom: 60px;

  > .form-wrap {
    margin: 0 auto;
    background-color: #fff;
    padding: 30px 50px 40px;
    box-sizing: border-box;
    width: 540px;
  }
}

.form-title {
  color: #575757;
  font-size: 20px;
  display: flex;
  align-items: center;

  &::before {
    content: '';
    display: block;
    width: 4px;
    height: 22px;
    background-color: #003a56;
    margin-right: 20px;
  }
}

.form-item-input {
  color: #575757;
  border: 1px solid #c2c4cd;
  width: 100%;
  height: 60px;
  margin: 30px 0;
  border-radius: 4px;

  > input {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 16px;
  }
}

.submit-btn {
  background-color: #3a3a3a;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  transition: all 0.4s ease;
  cursor: pointer;

  &:hover {
    opacity: 0.7;
  }
}
</style>